<template>
    <div>
        <van-pull-refresh v-model="loading" @refresh="onRefresh">
        <div class="header" ref="header">
            <div class="back_btn" ref="back_btn" @click="back_step">
                <van-icon name="arrow-left" size="30px" color="white" />
            </div>

            <span ref="title" class="header_title">教程详情</span>
        </div>
        <div class="container" style="height: 100vh;  overflow: scroll;" @scroll.passive="xxx($event)">
            <div class="goods">
                <div class="swiper">
                    <img style="width: 100vw;height: 50vh;" src="./photo/2.jpg" alt="">
                </div>
                <div class="goods_info">
                    <div class="goods_price">
                        戒指（包界面款）
                    </div>
                    <div class="goods_info_mid">
                        -&nbsp;编织&nbsp;-
                    </div>
                    <div class="goods_info_bottom">
                        <div></div>
                        <div></div>
                        <div class="kuaidi">
                            <span>收藏</span>
                            10
                        </div>
                        <div class="sell_num">
                            <span>评论</span>
                            0
                        </div>
                        <div class="address">
                            <span>点赞</span>
                            0
                        </div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>

            <!-- 详情 -->
            <div class="xiangqing">
                <div class="yi">
                    <div class="yi_zuo">
                        <img style="height:35px;width: 35px;border-radius: 50%;" src="./photo/1.jpg" alt="">
                        <div>
                            <span style="">蓝色火焰</span>
                        </div>
                    </div>
                    <!-- <div class="yi_you" @click="guan_zhu">
                        <span v-if="guan == 0">关注</span>
                        <span v-else style="color: #9d9d9d;background-color: #f4f4f4;">已关注</span>
                    </div> -->
                    <div class="yi_you" @click="guan_zhu" v-if="guan == 0">
                        关注
                    </div>
                    <div class="yi_you" @click="guan_zhu" v-else style="color: #9d9d9d;background-color: #f4f4f4;">
                       已关注
                    </div>
                </div>
                <div class="er">
                    <img style="height:15px;width: 15px;" src="../cby/photo/引号.png" alt=""><br>
                    <span>
                        dddddddddddddddddddddddd
                    </span>
                </div>
                <div class="san">
                    <span style="font-size: 15px;font-weight:bold;">所需材料</span>
                    <!-- 材料循环部分 -->
                    <div
                        style="display: flex;padding: 5px 0px 5px 0px;font-size: 13px;border-bottom: 1px solid #f4f4f4;">
                        <div style="flex: 1;">包戒面轴线</div>
                        <div>对折</div>
                    </div>

                </div>
                <div class="si">
                    <span style="font-size: 15px;font-weight:bold;">所需工具</span>
                    <!-- 工具循环部分 -->
                    <div
                        style="display: flex;padding: 5px 0px 5px 0px;font-size: 13px;border-bottom: 1px solid #f4f4f4;">
                        <div style="flex: 1;">剪刀</div>
                        <div>一把</div>
                    </div>
                </div>
            </div>
            <!-- 步骤 、循环它-->
            <div class="buzhou">
                <div style="padding: 5px 0px 5px 0px;font-size: 13px;">
                    <span style="font-size: 15px;font-weight:bold;">步骤1</span>
                </div>
                <div>
                    <img style="width: 94vw;height:300px;border-radius: 10px;" src="../cby/photo/3.jpg" alt="">
                </div>
                <div style="padding: 5px 0px 5px 0px;font-size: 13px;">
                    <span style="width: 100px;word-break: break-all;
                    overflow: auto;white-space: normal;">
                        哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
                    </span>
                </div>
            </div>
            <!-- 评论 -->
            <div class="pinglun">
                <div class="one">评论&nbsp;0</div>

                <div class="two">
                    <div class="two_zuo">
                        <img style="height:35px;width: 35px;border-radius: 50%;" src="./photo/1.jpg" alt="">
                    </div>
                    <div class="two_you">
                        <div class="y_yi">暗色</div>
                        <div class="y_er">
                            <span>hhsssssssssssssssssssssssssssssssssssaaaaaaaaaaaaaaaaaa</span>
                        </div>
                        <div class="y_san"><span>2022-10-7&nbsp;&nbsp;11:01</span></div>
                    </div>
                </div>
                
            </div>
        </div>
        <div class="foot">
            <van-action-bar>
                <div class="shu_ru">
                    <div style="margin-top: 5px;padding-left: 5px;">
                        <van-icon name="guide-o" size="15" @click="pinglun_fn()"/>
                    </div>

                    <input type="text" placeholder="请输入评论..." v-model="ping_lun"
                        style="height: 25px;width: 99%;border-radius: 50px;background-color: #f4f4f4;outline:none;border: 0px;font-size: 8px;">
                        
                </div>
                <div class="dian" @click="dianzan">
                        <img v-if="dian == 0" style="height: 15px;width: 15px;margin-right: 5px;" src="./photo/点赞前.png" alt=""/>
                        <img v-else style="height: 15px;width: 15px;margin-right: 5px;" src="./photo/点赞后.png" alt="" />
                    <span>点赞</span>
                </div>
                <div class="shou" @click="shoucang">
                    <img v-if="shou == 0" style="height: 15px;width: 15px;margin-right: 5px;" src="./photo/收藏前.png" alt=""/>
                        <img v-else style="height: 15px;width: 15px;margin-right: 5px;" src="./photo/收藏后.png" alt="" />
                    <span>收藏</span>
                </div>
            </van-action-bar>
        </div>
    </van-pull-refresh>
    </div>


    <!-- 轮播图预览 -->
    <VanImagePreview>

    </VanImagePreview>
</template>
    
<script setup lang='ts'>
import { Toast } from "vant";
import { onMounted, ref, reactive } from "vue";
import { useRoute, useRouter } from "vue-router"
import { ImagePreview } from 'vant';


let ping_lun = ref(null)
function pinglun_fn(){
    console.log(ping_lun.value);   
}
//轮播图预览
// import 'vant/es/image-preview/style';
const VanImagePreview = ImagePreview.Component;

const Route = useRoute()
const Router = useRouter()
const images = [
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg',
    'https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg',
];

//下拉刷新
const count = ref(0);
const loading = ref(false);

const onRefresh = () => {
      setTimeout(() => {
        Toast('刷新成功');
        loading.value = false;
        count.value++;
      }, 1000);
    };

//轮播图预览点击事件
function preview_img(cc: any) {
    ImagePreview({
        images,
        startPosition: cc,
    });
}
let title: any = ref(null)
let header: any = ref(null)
let back_btn: any = ref(null)
let dian = ref(0)
let shou = ref(0)
let guan = ref(0)
//页面回退上一页面
function back_step() {
    Router.go(-1)
}

//监听滚动事件
function xxx(e: any) {
    let color = e.target.scrollTop / 333
    title.value.style.color = ` rgba(0, 0, 0, ${color})`
    back_btn.value.style.backgroundColor = ` rgba(0, 0, 0, ${0.5 - color})`
    if (color >= 0.5) {
        back_btn.value.children[0].style.color = 'black'
    } else {
        back_btn.value.children[0].style.color = 'white'
    }

    if (color > 0.2) {
        header.value.style.backgroundColor = ` rgba(255,255, 255, ${color})`
    } else {
        header.value.style.backgroundColor = ` rgba(255,255, 255, 0)`
    }
}
//底部、收藏点赞
function dianzan() {
    console.log(11);
    
    if(dian.value == 0){
        dian.value = 1
    }else{
        dian.value = 0
    }
}
function shoucang() {
    if(shou.value == 0){
        shou.value = 1
    }else{
        shou.value = 0
    }
}
//关注
function guan_zhu(){
    if(guan.value == 0){
        guan.value = 1
    }else{
        guan.value = 0
    }
}
</script>
    
<style scoped>
.container {
    background-color: #ebedf0;
    overflow: scroll;
}

/* .swiper { */
/* height: 50vh; */
/* border: 1px solid red; */
/* } */

.custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 4px 10px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 35%;
}

.goods_info_mid {
    display: flex;
    justify-content: space-around;
    color: #c4c4c4;
    font-size: 15px;
}

.goods_info_bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    color: #969799;
    font-size: 15px;
    padding: 5px;
}

.goods_price {
    padding: 5px;
    text-align: center;
}

.goods {
    background-color: #fff;
    /* padding-bottom: 2vh; */
}

.goods_detail_title {
    padding: 2vh 0;
    color: #969799;
    text-align: center;
}

.back_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    background-color: rgba(0, 0, 0, 0.5);
    margin: 10px 10px;

}

.foot {
    width: 100vw;
    position: fixed;
    bottom: 0px;
    height: 45px;
    display: flex;
}
.shu_ru{
    flex: 4;
    margin: 0px 10px 0px 10px;
    display: flex;
    border-radius: 50px;
    background-color: #f4f4f4;
}
.dian,.shou{
    flex: 1;
    margin: 0px 10px 0px 10px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    height: 10vh;
    width: 100vw;
    background-color: rgba(0, 0, 0, 0);
    color: rgba(0, 0, 0, 0);
    z-index: 999;
}

.header_title {
    padding-right: 42vw;
}

.xiangqing {
    background-color: white;
    margin-top: 5px;
    padding: 10px;
}

.yi {
    display: flex;
    margin-bottom: 5px;
}

.yi_zuo {
    flex: 1;
    display: flex;
    align-items: center;
}

.yi_zuo>div {
    margin-left: 5px;
    font-size: 15px;
}


.yi_you {
    margin: 5px;
    display: flex;
    align-items: center;
    padding: 0px 15px 0px 15px;
    background-color: #ee554d;
    color: #f0d4d2;
    font-size: 13px;
    border-radius: 50px;
}

.er {
    background-color: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
}

.er>span {
    width: 100px;
    word-break: break-all;
    overflow: auto;
    white-space: normal;
}

.san {
    padding: 5px 0px 5px 0px;
}

/* .si {
    border: 1px solid black;
} */

.buzhou {
    background-color: white;
    padding: 0px 10px 10px 10px;
}

.pinglun {
    background-color: white;
    margin: 5px 0px 50px 0px;
    padding: 10px;
}

.one {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 10px;
}

.two {
    display: flex;
    margin-bottom: 5px;
}

.two_zuo {
    margin-right: 7px;
}

.two_you {
    margin-right: 10px;
}

.y_yi {
    font-size: 13px;
    color: #9d9d9d;
}

.y_er>span {
    font-size: 15px;
    width: 100px;
    word-break: break-all;
    overflow: auto;
    white-space: normal;
}

.y_san>span {
    color: #9d9d9d;
    font-size: 5px;
}
</style>